<template>
  <div class="bods">
    <!-- 评论详情 -->
    <div style=" background-color: rgb(255, 255, 255);">
   <div class="tobs">
      <ul>
        <li>
          <div class="fanh" @click="fanh">
            <img src="../../assets/syb.png" alt="" />
          </div>
        </li>
        <li>评论详情</li>
        <li  @click="showShare = true">
          <div class="fanh">
            <img src="../../assets/fx2.png" alt="" />
          </div>
        </li>
        <li  @click="showShare = true">
          <div class="fanh">
            <img src="../../assets/gd(2).png" alt="" />
          </div>
        </li>
      </ul>
    </div>
    <div class="conten">
      <ul>
        <li>
          <div class="logo" v-if="dats.userInfo.avatarUrl">
            <img :src="dats.userInfo.avatarUrl" alt="" />
          </div>
          <span>{{ dats.userInfo.nickName }}</span>
        </li>
        <li>
          <span>{{ dats.addTime | formatCtime }}</span>
        </li>
        <li>
          <span>{{ dats.content }}</span>
        </li>
        <li v-for="(item, index) in dats.picList" :key="index" class="imgs"   @click.stop="chakan(item)">
          <img :src="item" alt="" />
        </li>
        <li class="fenge"></li>
        <li class="yans"><span>颜色类型：</span><span>经典款</span></li>
      </ul>
    </div>
    </div>
 
  
    <div class="pinglun">
      <ul class="pingluq">
        <li>
          <div class="imgs">
            <img src="../../assets/plaq.png" alt="" />
          </div>
          <span>全部评论</span>
        </li>
      </ul>
      <div class="shafa">
        <span>沙发还是空的</span>
      </div>
    </div>
  <van-overlay :show="show" @click="show = false" z-index="99">
        <div class="wrapper" @click.stop>
          <div class="block">
            <ul>
              <li class="tu">
                <img :src="imgs" alt="" />
                <span class="guanb" @click="gb">关闭</span>
              </li>
            </ul>
          </div>
        </div>
      </van-overlay>
 
<van-share-sheet
  v-model="showShare"
  title="立即分享给好友"
  :options="options"
  @select="onSelect"
/>
  </div>
</template>

<script>
    import { Overlay } from "vant";
import { ShareSheet } from "vant";
export default {
  name: "pingluxiangq",
  components: {
    [ShareSheet.name]: ShareSheet,
     [Overlay.name]: Overlay,
  },
  data() {
    return {
      dats: [],
         showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
         show: false,
         imgs:""
    };
  },
  activated() {
    //
    this.dats = JSON.parse(this.$route.query.user);
    console.log(JSON.parse(this.$route.query.user));
  },
  methods: {
    fanh() {
      this.$router.go(-1);
    },
     onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
      chakan(e) {
      console.log(e);
      this.imgs = e;
      this.show = true;
      console.log("123564");
    },
    gb(){
          this.show = false;
    }
  },
  filters: {
    // 定义局部过滤器

    // 格式化时间
    formatCtime(dateStr) {
      // console.log(dateStr)

      let data = dateStr.split(" ");
      data.pop();

      return data[0];
    },
  },
};
</script>

<style lang="less" scoped>
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 90%;
    height: 375px;

    ul {
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 100%;
      li {
        position: relative;

        flex: 1;
        background-color: #fff;
        .guanb {
          position: absolute;
          top: 0;
          right: 0;
          padding: 10px 10px 10px 10px;
          background-color: rgb(145, 186, 224);
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }


.bods{
    height: 100%;
      background-color: rgb(243, 243, 243);
    //  background-color: rgb(243, 243, 243);
.tobs {
  width: 100%;
  height: 50px;
  //   border: 1px solid #000;
  background-color: rgb(247, 252, 255);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  ul {
    display: flex;
    align-items: center;
    width: 100%;
    margin-left: 10px;
    margin-right: 10px;
    li {
      display: flex;
      align-items: center;
      height: 40px;
      //   border: 1px solid #000;
      &:nth-child(1) {
        width: 40px;
        .fanh {
          height: 50%;
          width: 50%;
          // background-color: rgb(233, 233, 233);
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      &:nth-child(2) {
        flex: 1;
        font-size: 17px;
        font-weight: 530;
        color: rgb(54, 54, 54);
      }
      &:nth-child(3) {
        width: 20px;

        height: 20px;
        margin-right: 20px;
        color: rgb(54, 54, 54);
        .fanh {
          height: 100%;
          width: 100%;
          // background-color: rgb(233, 233, 233);
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      &:nth-child(4) {
        width: 20px;

        height: 20px;
        color: rgb(54, 54, 54);
        .fanh {
          height: 100%;
          width: 100%;
          // background-color: rgb(233, 233, 233);
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
.conten {
 padding-top: 50px;
  margin-left: 10px;
  margin-right: 10px;
  padding-bottom: 10px;

 
  ul {
    margin-top: 10px;
   letter-spacing:1px;
    // border: 1px solid #000;
    li {
      &:nth-child(1) {
        height: 50px;
        display: flex;
        align-items: center;
        .logo {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          border: 1px solid #000;
          overflow: hidden;
          margin-right: 10px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        span {
          font-size: 17px;
          color: rgb(236, 109, 86);
        }
      }
      &:nth-child(2) {
        margin-top: 10px;
        font-size: 16px;
        color: rgb(167, 162, 162);
      }
      &:nth-child(3) {
        margin-top: 15px;
        font-size: 16px;
        color: rgb(61, 61, 61);
      }
    }
    .imgs {
      width: 100%;
      margin-top: 10px;
      img {
        width: 100%;
      }
    }
    .fenge {
      margin-top: 10px;
      border-bottom: 1px solid rgb(197, 197, 197);
    }
    .yans {
      margin-top: 10px;
      color: rgb(177, 175, 175);
      font-size: 16px;
    }
  }
}
.pinglun {
  margin-top: 10px;
  width: 100%;
  height: 50px;

  background-color: rgb(243, 243, 243);
  .pingluq {
       height: 40px;
       display: flex;
       align-items: center;

    background-color: rgb(255, 255, 255);
    li {
      margin-left: 10px;
      margin-right: 10px;
      display: flex;
      align-items: center;
      :nth-child(1) {
        height: 30px;
        background-color: rgb(255, 255, 255);
      }
      .imgs {
        width: 30px;
        height: 30px;
        margin-right: 10px;
        // border: 1px solid #000;
      }
    }
  }
  .shafa {
    height: 100px;
    //   border: 1px solid #000;
    background-color: rgb(243, 243, 243);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: rgb(190, 190, 190);
  }
}}
</style>